<template>
  <div class="address">
    <van-sticky class="nav">
      <!-- 顶部导航 -->
      <van-nav-bar class="topNaV" @click-left="onClickLeft">
        <template #title>
          <p class="title">{{ title }}</p>
        </template>
        <template #left>
          <van-icon name="arrow-left" color="#666666" />
          <p class="left">返回</p>
        </template>
      </van-nav-bar>
    </van-sticky>

    <van-form>
      <van-field v-model="form.name" type="text" label="收货人" placeholder="收货人" />
      <van-field
        v-model="form.mobile"
        type="text"
        label="手机号码"
        placeholder="手机号码"
      />

      <van-field
        readonly
        v-model="form.address"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="show = true"
      />
      <van-popup v-model:show="show" round  position="bottom">
        <van-picker
          title="选择地址"
          :columns="areaList"
          @cancel="show = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-field
        v-model="form.address_detail"
        type="text"
        label="详细地址"
        placeholder="详细地址"
      />
      <van-field name="switch" label="设为默认地址">
        <template #input>
          <van-switch v-model="form.is_default" size="20" />
        </template>
      </van-field>
    </van-form>
    <div class="box">
      <div @click="sumbit">保存</div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { saveAction } from '@/api/index'
import { useCascaderAreaData } from '@vant/area-data'
const form = ref({})
const show = ref(false)
const title = ref('新建地址')
const store = useStore()
const route = useRoute()
const router = useRouter()
const areaList = useCascaderAreaData()
if (route.params.data) {
  form.value = route.params.data
  title.value = '修改地址'
}
const onClickLeft = () => {
  router.back()
}
const onConfirm = (values) => {
  console.log(values)
  form.value.address = values.selectedOptions.map(el => { return el.text }).join(',')
  console.log(form.value.address)
  show.value = false
}
const sumbit = () => {
  const arr = form.value.address.split(',')
  form.value.address = arr.join(' ')
  const obj = {
    addressId: '',
    checked: form.value.is_default,
    address: form.value.address,
    detailadress: form.value.address_detail,
    openId: store.state.openId,
    telNumber: form.value.mobile,
    userName: form.value.name
  }
  if (form.value.id) {
    obj.addressId = form.value.id
  }
  saveAction(obj)
  // 提交后返回
  router.back()
}
</script>
<script>
export default {
  name: 'editAddress'
}
</script>

<style scoped lang="scss">
.address {
  .nav {
    .topNav {
      .left {
        font-size: 31.2px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }

      .title {
        font-size: 36px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .box {
    position: fixed;
    left: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    div {
      background: #cea62a;
      border-radius: 44.5px;
      width: 710px;
      height: 90px;
      border: none;
      margin: 0 auto 68px;
      font-size: 30px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 500;
      line-height: 90px;
    }
  }
}
</style>
